<template>
    <section class="section section-components pb-0" id="section-components">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <!-- Basic elements -->
                    <h2 class="mb-5">
                        <span>以下是我们拥有的优质房源</span>
                    </h2>
                    <!-- Buttons -->
                    <tabs fill class="flex-column flex-md-row">
                        <card shadow>
                            <tab-pane>
                                <span slot="title">
                                    北京
                                </span>
                                <display-card :msg="'北京'"></display-card>
                            </tab-pane>

                            <tab-pane>
                                <span slot="title">
                                    上海
                                </span>
                                <display-card :msg="'上海'"></display-card>
                            </tab-pane>

                            <tab-pane>
                                <span slot="title">
                                    广州
                                </span>
                                <display-card :msg="'广州'"></display-card>
                            </tab-pane>

                            <tab-pane @click="changeStatus('深圳')">
                                <span slot="title">
                                    深圳
                                </span>
                                <display-card :msg="'深圳'"></display-card>
                            </tab-pane>

                            <tab-pane>
                                <span slot="title">
                                    天津
                                </span>
                                <display-card :msg="'天津'"></display-card>
                            </tab-pane>

                            <tab-pane>
                                <span slot="title">
                                    南京
                                </span>
                                <display-card :msg="'南京'"></display-card>
                            </tab-pane>
                        </card>
                    </tabs>
                </div>
            </div>
        </div>
    </section>

</template>
<script>
import DisplayCard from "./DisplayCard.vue"
import Tabs from "../../components/Tabs/Tabs.vue"
import TabPane from "../../components/Tabs/TabPane.vue"
export default {
    data() {
        return{
            // bj:true,
            // sh:false,
            // gz:false,
            // sz:false,
            // tj:false,
            // nj:false,
        }
    },
    method:{
        // changeStatus(city){
        //     if(city === "北京"){
        //         this.bj = true;
        //     }else if(city === "南京"){
        //         this.nj = true;
        //     }else if(city === "上海"){
        //         this.sh = true;
        //     }else if(city === "广州"){
        //         this.gz = true;
        //     }else if(city === "深圳"){
        //         this.sz = true;
        //     }else if(city === "天津"){
        //         this.tj = true;
        //     }
        // }
    },
    components: {
        DisplayCard,
        Tabs,
        TabPane,
    }
};
</script>
<style>
</style>
